Security News
npm Updates Search Experience with New Objective Sorting Options
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
svg-pathdata
Advanced tools
Manipulate SVG path data (path[d] attribute content) simply and efficiently.
The svg-pathdata npm package is a powerful tool for parsing, manipulating, and serializing SVG path data. It allows developers to easily work with SVG path strings, converting them into a more manageable format, modifying their properties, and converting them back into strings. This package is particularly useful for applications that need to dynamically generate or alter SVG graphics.
Parsing SVG Path Data
This feature allows you to parse a string containing SVG path data into a more manageable object format. This is useful for reading and manipulating individual commands within an SVG path.
"const {SVGPathData, SVGPathDataParser} = require('svg-pathdata');\nconst pathData = new SVGPathData('M10 10L90 90');"
Serializing SVG Path Data
After manipulating or generating SVG path data, this feature enables you to convert the path data back into a string format. This is essential for rendering the modified SVG graphics on the web.
"const {SVGPathData} = require('svg-pathdata');\nconst pathData = new SVGPathData('M10 10L90 90');\nconst serializedPath = pathData.encode();"
Transforming SVG Path Data
This feature provides a set of transformation functions (such as translate, rotate, scale) that can be applied to the path data. It's useful for dynamically altering the appearance of SVG graphics without manually recalculating path commands.
"const {SVGPathData, SVGPathDataTransformer} = require('svg-pathdata');\nconst pathData = new SVGPathData('M10 10L90 90').transform(SVGPathDataTransformer.translate(10, 20));"
Similar to svg-pathdata, svgpath provides tools for parsing and modifying SVG path data. It offers a fluent API for transforming paths (translate, rotate, scale, etc.). Compared to svg-pathdata, svgpath might be preferred for its chainable transformations, but it lacks some of the direct manipulation capabilities.
This package focuses on parsing SVG path data into a more readable and manipulable array format. While it provides a solid parsing capability, it does not offer the extensive manipulation and serialization features found in svg-pathdata, making it more suitable for applications that primarily need to interpret path data.
Manipulate SVG path data (path[d] attribute content) simply and efficiently.
Install the module:
npm install --save svg-pathdata
Then in your JavaScript files:
import {
SVGPathData,
SVGPathDataTransformer,
SVGPathDataEncoder,
SVGPathDataParser,
} from 'svg-pathdata';
const pathData = new SVGPathData(`
M 10 10
H 60
V 60
L 10 60
Z`);
console.log(pathData.commands);
// [ {type: SVGPathData.MOVE_TO, relative: false, x: 10, y: 10},
// {type: SVGPathData.HORIZ_LINE_TO, relative: false, x: 60},
// {type: SVGPathData.VERT_LINE_TO, relative: false, y: 60},
// {type: SVGPathData.LINE_TO, relative: false, x: 10, y: 60},
// {type: SVGPathData.CLOSE_PATH}]
const parser = new SVGPathDataParser();
parser.parse(' '); // returns []
parser.parse('M 10'); // returns []
parser.parse(' 10'); // returns [{type: SVGPathData.MOVE_TO, relative: false, x: 10, y: 10 }]
parser.write('H 60'); // returns [{type: SVGPathData.HORIZ_LINE_TO, relative: false, x: 60 }]
parser.write('V'); // returns []
parser.write('60'); // returns [{type: SVGPathData.VERT_LINE_TO, relative: false, y: 60 }]
parser.write('L 10 60 \n Z');
// returns [
// {type: SVGPathData.LINE_TO, relative: false, x: 10, y: 60 },
// {type: SVGPathData.CLOSE_PATH }]
parser.finish(); // tell parser there is no more data: will throw if there are unfinished commands.
const pathData = new SVGPathData(`
M 10 10
H 60
V 60
L 10 60
Z`);
// returns "M10 10H60V60L10 60Z"
encodeSVGPath({ type: SVGPathData.MOVE_TO, relative: false, x: 10, y: 10 });
// returns "M10 10"
encodeSVGPath({ type: SVGPathData.HORIZ_LINE_TO, relative: false, x: 60 });
// returns "H60"
encodeSVGPath([
{ type: SVGPathData.VERT_LINE_TO, relative: false, y: 60 },
{ type: SVGPathData.LINE_TO, relative: false, x: 10, y: 60 },
{ type: SVGPathData.CLOSE_PATH },
]);
// returns "V60L10 60Z"
This library can perform transformations on SVG paths. Here is an example of that kind of use.
new SVGPathData(`
m 10,10
h 60
v 60
l 10,60
z`)
.toAbs()
.encode();
// return s"M10,10 H70 V70 L80,130 Z"
Here, we take SVGPathData from stdin and output it transformed to stdout.
const transformingParser = new SVGPathDataParser().toAbs().scale(2, 2);
transformingParser.parse('m 0 0'); // returns [{ type: SVGPathData.MOVE_TO, relative: false, x: 0, y: 0 }]
transformingParser.parse('l 2 3'); // returns [{ type: SVGPathData.LINE_TO, relative: false, x: 4, y: 6 }]
You can find all supported transformations in src/SVGPathDataTransformer.ts. Additionally, you can create your own by writing a function with the following signature:
type TransformFunction = (command: SVGCommand) => SVGCommand | SVGCommand[];
function SET_X_TO(xValue = 10) {
return function(command) {
command.x = xValue; // transform command objects and return them
return command;
};
};
// Synchronous usage
new SVGPathData('...')
.transform(SET_X_TO(25))
.encode();
// Chunk usage
new SVGPathDataParser().transform(SET_X_TO(25));
Clone this project, run:
npm install; npm test
FAQs
Manipulate SVG path data (path[d] attribute content) simply and efficiently.
The npm package svg-pathdata receives a total of 1,627,601 weekly downloads. As such, svg-pathdata popularity was classified as popular.
We found that svg-pathdata demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.